<script setup>
import { useAuthStore } from './stores/auth'
import { useRouter, useRoute } from 'vue-router'
import { User, ArrowDown, SwitchButton } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import LeftSideBar from './views/LeftSideBar/index.vue'
import { ref, computed } from 'vue'

const authStore = useAuthStore()
const router = useRouter()
const route = useRoute()
const isAuthPage = computed(() => {
  return ['/login', '/logout'].includes(route.path)
})

const handleLogout = () => {
  ElMessageBox.confirm(
    '确定要退出登录吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    router.push('/logout')
  }).catch(() => {})
}
</script>

<template>
  <div class="app">
    <div class="layout-container" :class="{ 'full-page': isAuthPage }">
      <LeftSideBar 
        v-if="authStore.user && !isAuthPage" 
        class="sidebar"
      />
      
      <div class="main-content"  :class="{ 'full-width': isAuthPage }">
        <!-- 头部用户信息 -->
        <el-header v-if="authStore.user && !isAuthPage">
          <div class="user-info">
            <el-dropdown>
              <span class="user-dropdown">
                <el-avatar :size="32" :icon="User" />
                {{ authStore.user.username }}
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleLogout">
                    <el-icon><switch-button /></el-icon>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        
        <!-- 路由视图 -->
        <div class="router-view-container">
          <router-view></router-view>
        </div>

        <!-- 新增 footer -->
        <footer class="app-footer" v-if="!isAuthPage">
          <div class="footer-content">
            <p>© {{ new Date().getFullYear() }} 数据分析平台. 保留所有权利</p>
          </div>
        </footer>
      </div>
    </div>
  </div>
</template>

<style scoped>
.app {
  /* min-height: 100vh; */
  /* width: 100vw; */
  padding: 0;
  margin: 0;
  overflow-x: scroll;
}

.layout-container {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  height: 100vh;
  z-index: 1000;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 240px;
  overflow-x: scroll;
}

.main-content.full-width {
  margin-left: 0;
}

.el-header {
  background-color: white;
  border-bottom: 1px solid var(--el-border-color-light);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  height: 60px;
}

.router-view-container {
  flex: 1;
  padding: 0;
  overflow: auto;
  min-height: 0;
  
}

.user-info {
  height: 100%;
  display: flex;
  align-items: center;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 8px;
  color: var(--el-text-color-primary);
  gap: 8px;
}

.user-dropdown:hover {
  color: var(--el-color-primary);
}

.app-footer {
  border-top: 1px solid var(--el-border-color-light);
  padding: 16px 0;
  background-color: white;
}

.footer-content {
  text-align: center;
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

.full-page {
  min-height: 100vh;
  width: 100vw;
}
</style>
